/* 
项目的根组件
渲染流程
APP -> index.js  -> id为root的节点
*/


const num = 1000
const getNum = () => {
  return num *2
}

// 渲染列表用的数组
const list = [
  {id:1 , name:'vue'},
  {id:2, name:'react' }
]

// 绑定事件用的变量和方法
const bookType = 4 // 1 2 
const getbooktype = () => {
  if(bookType === 0){
    return <div>我是无图模式</div>
  }else if(bookType === 1){
    return <div>我是单图模式</div>
  }else{
    return <div>我是双兔模式</div>
  }
}

// 定义组件 首字母一定大写
const Button = () => {
  return <button>click me !</button>
}



function App() {

  // 事件函数
  const click = (name,e) => {
    console.log('被点击了',name,e);
  }


  return (
    <div className="App">
      从现在开始 从头学习react
      {/* 
      jsx语法使用场景
      1. 使用引号
      2. 识别变量
      3. 函数调用 方法调用
      4. 识别js对象 外层{} 表示识别对象语法 内层{}表示识别对象结构
      
      */}
      <div>{'好开心'}</div>
      <div>{num}</div>
      <div>{getNum()}</div>
      <div style={{color:'red'}}>
        识别js对象
      </div>

      {/* 
      渲染列表
      使用map方法 要遍历出来什么 就return什么  key必须要给,是react框架内部实现虚拟DOM的一种手段
      */}
      <ul>
        {list.map(item => <li key={item.id}>{item.name} </li> ) }
      </ul>

      {/* 
      条件渲染: 可以使用逻辑运算符 &&  , 三元表达式 :?  , 还可以写成函数
      */}
      <div>
        {getbooktype()}
      </div>


      {/* 
      事件绑定  on+事件名称 驼峰命名法  如果需要传递参数 则改造成箭头函数
      */}
      <button onClick={(e)=> click('ts',e) }>click me </button>

      {/* 使用组件 */}
      <Button/>
      <Button></Button>

    </div>
  );
}

export default App;
